// 页面展示的数据
import Base from "../base.js";
import MoviesApi from "../../api/movies.js";


// 电影信息
export default class extends Base {
    data = {
        curPage: 1, //当前页
        eachPage: 10, //显示多少条数据
        total: 0, //总条数
        maxPage: 0, //总页数
        rows: [], //当前页数
    };
    addDate = {

    }

    render() {
        this.$el.html(`
        <div>
        <h1 style="margin:20px auto;width:140px;font-weight:bold;">电影列表</h1>
        <form class="layui-form" style="display:flex;margin:auto;width:627px;flex-flow:row-reverse;">
            <div>
                <div>   
                    <a id="find-btn" class="layui-btn layui-btn-sm">立即查询</a>
                </div>
            </div>
            <div class="layui-form-item" id="isClassic">
                <label class="layui-form-label" style="padding: 9px 0;">是否经典</label>
                <div class="layui-input-block">
                    <input type="radio" name="isClassic" value="true" title="是" lay-filter="ChoiceRadio">
                    <input type="radio" name="isClassic" value="false" title="否" lay-filter="ChoiceRadio">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:revert;text-align: right; ">电影类型</label>
                <div class="layui-input-block">
                    <select name="query-movie" lay-verify="required" lay-filter="type">
                        <option value="1" >请选择</option>
                        <option value="爱情">爱情</option>
                        <option value="喜剧">喜剧</option>
                        <option value="动画">动画</option>
                        <option value="剧情">剧情</option>
                        <option value="恐怖">恐怖</option>
                        <option value="惊悚">惊悚</option>
                        <option value="科幻">科幻</option>
                        <option value="动作">动作</option>
                        <option value="悬疑">悬疑</option>
                        <option value="犯罪">犯罪</option>
                        <option value="冒险">冒险</option>
                        <option value="战争">战争</option>
                        <option value="奇幻">奇幻</option>
                        <option value="运动">运动</option>
                        <option value="家庭">家庭</option>
                        <option value="古装">古装</option>
                        <option value="武侠">武侠</option>
                        <option value="西部">西部</option>
                        <option value="传记">传记</option>
                        <option value="歌舞">歌舞</option>
                        <option value="黑色电影">黑色电影</option>
                        <option value="短片">短片</option>
                        <option value="纪录片">纪录片</option>
                        <option value="音乐">音乐</option>
                        <option value="灾难">灾难</option>
                        <option value="青春">青春</option>
                        <option value="儿童">儿童</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
            </div>
        </form>
        <table border="1" class="layui-table" >
            <thead>
                <tr>
                    <th style="width:100px">电影名</th>
                    <th>电影英文名</th>
                    <th>类型</th>
                    <th>首映地区</th>
                    <th>时长</th>
                    <th>上映时间</th>
                    <th>评分</th>
                    <th>票房</th>
               
                    <th>经典</th>
                    <th>导演</th>
                    <th>演员</th>
                    <th>海报</th>
                    <th>操作</th>
                </tr>
            </thead>
        <tbody class="movies-list"></tbody>
    </table>  
    <form class="layui-form" width="100" style="font-size:10px;">
                <div class="layui-form-item" style="display:inline-block;width:150px;">
                    <label id="cinemaId" class="layui-form-label">当前页</label>
                    <div class="layui-input-block" style="margin-left: 80px;">
                        <select id="curPage" lay-verify="required"></select>
                    </div>
                </div>
                每页显示条数：<input type="text" name="eachPage" value="${this.data.eachPage}" style="width:25px">
                总条数：<span id="total"></span>
            </form>
            <div style="margin:auto;width:210px;">
                <button id="first-btu" 	class="layui-btn layui-btn-sm"  >首页</button>
                <button id="prev-btu" 	class="layui-btn layui-btn-sm"  >
                    <i class="layui-icon layui-icon-left layui-font-12"></i>
                </button>
                <button id="next-btu" 	class="layui-btn layui-btn-sm"  >
                    <i class="layui-icon layui-icon-right layui-font-12"></i>
                </button>
                <button id="last-btu" 	class="layui-btn layui-btn-sm"  >尾页</button>
      
            </div>
        `);
        const form = layui.form;
        form.render();
        // 获取tbody节点
        this.$moviesList = $(".movies-list");
        // 当前页
        this.$curPageEle = $("#curPage");
        // 每页显示条数
        this.$eachPageEle = $("input[name=eachPage]");
        // 总条数
        this.$totalEle = $("#total");
        //  首页
        this.$firstBtuEle = $("#first-btu");
        // 上一页
        this.$prevBtuEle = $("#prev-btu");
        // 下一页
        this.$nextBtuEle = $("#next-btu");
        // 尾页
        this.$lastBtuEle = $("#last-btu");
        // 获取查询按钮
        this.$findBtn = $("#find-btn");
        // 获取下拉列表
        this.$movieFind = $("select[name=query-movie]")

    }
    // 再次渲染
    rerender() {
        // /movies/e0fc207c3e3c5.jpeg
        //this.data.rows拿到整个显示的数据 
        console.log(this.data.rows);
        const str = this.data.rows.map((item, index) => {
            return `
        <tr>
            <!-- 通过class的方法拿到每一行的id -->
            <td class="${item._id}">${item.cname}</td>
            <td style="texe-overflow：ellipsis">${item.ename}</td>
            <td>${item.type}</td>
            <td>${item.area}</td>
            <td>${item.time}</td>
            <td>${item.upDate}</td>
            <td>${item.score}</td>
            <td>${item.count}</td>
         
            <td >${item.isClassic}</td>
            <td>${item.director}</td>
            <td>${item.actor}</td>
            <td><img src="http://localhost:3002${item.poster}" alt=""></td>
            <td style="display: flex;">
                <button name="modify-btn" value="${index}" class="layui-btn layui-btn-sm layui-bg-gray" >修改</button>
                <button name="delete-btn" value="${index}" class="layui-btn layui-btn-sm">删除</button>
            </td>
        </tr>
        `
        }).join("");
        // 渲染
        this.$moviesList.html(str);
        // 显示当前页
        let options = "";
        // for循环添加option
        for (let i = 1; i <= this.data.maxPage; i++) {
            options += `
            <option value="${i}">${i}</option>
            `;
        }
        // 将添加好的options渲染进当前页的下拉列表
        this.$curPageEle.html(options);
        this.$curPageEle.val(this.data.curPage)
        const form = layui.form;
        form.render();
        // 显示总条数
        this.$totalEle.html(this.data.total);
        //获取删除节点
        this.$deleteBtn = $('button[name=delete-btn]');

        // 获取修改节点
        this.$reviseBtn = $('button[name=modify-btn]');

        // 绑定删除事件
        this.$deleteBtn.on("click", this.delete.bind(this));
        // 绑定修改事件
        this.$reviseBtn.on("click", this.revise.bind(this));

    }

    // 接到后台获取数据然后合并到data里面 拿去数据分页避免一次性渲染所有数据/性能优化
    async getMovies() {
        const { curPage, eachPage } = this.data;
        // 调用远程方法 获取数据
        const data = await MoviesApi.get({ curPage, eachPage });
        // 合并  把data里的内容筛选到this.data里
        Object.assign(this.data, data)
        // 直接调用 再次渲染页面内容
        this.rerender();
    };

    // 渲染完成之后执行
    async mounted() {
        // 获取数据
        await this.getMovies();
        this.rerender();
    };

    // 首页
    first() {
        // 判断是否是在第一页
        if (this.data.curPage === 1) return;
        this.data.curPage = 1;
        //重新渲染
        this.getMovies();
    };

    // 尾页
    last() {
        // 判断是否在最后一页
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.maxPage;
        this.getMovies();
    }

    // 上一页
    prev() {
        // 
        if (this.data.curPage === 1) return;
        this.data.curPage = this.data.curPage - 1;
        this.getMovies();
    };

    // 下一页
    next() {
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.curPage + 1;
        this.getMovies();
    };

    // 修改当前页显示条数失焦事件
    setEachPageHadle(e) {
        console.log(~~e.target.value);
        // e.target.value拿到节点的value值 隐式转换
        this.data.eachPage = ~~e.target.value;
        this.getMovies();
    }

    // 当前页表单change事件
    setcurPageHandel(e) {
        this.data.curPage = e.target.value;
        this.getMovies();
    }

    // 删除事件
    async delete(e) {
        console.log("in");
        const index = e.target.value;
        // 获取到tbody>index>下标为0的以class的方式 拿到数据
        const _id = $(`tbody>tr:eq(${index})>td:eq(0)`).attr("class");
        const status = await MoviesApi.delete(_id); //调用api删除id
        status ? layer.msg("删除成功") : layer.msg("删除失败");
        this.getMovies();
    }

    // 修改电影信息
    revise(e) {
        const index = e.target.value;
        console.log(index);
        const _id = $(`tbody>tr:eq(${index})>td:eq(0)`).attr("class");
        const data = { _id }
        Object.assign(this.data, data);
        //通过id获取修改电影的完整数据
        location.hash = `#/info/revise/${this.data._id}`;
    }

    // 单选框监听事件
    radioHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that = this;
        form.on('radio(ChoiceRadio)', function (data) {
            console.log(data.value);
            const classic = data.value;
            that.addDate["isClassic"] = classic;
            console.log(that.addDate);
            // that.btnAble();
        });
    }


    // 查询事件
    async findHandle() {
        const { isClassic } = this.addDate;
        const type = $("select[name=query-movie]").val();
        console.log(typeof isClassic);
        console.log({ type, isClassic });
        this.data.rows = await MoviesApi.find({ type, isClassic });
        console.log(this.data.rows);
        this.rerender()
    }


    // 添加事件
    handle() {
        // 查询事件按钮
        this.$findBtn.on("click", this.findHandle.bind(this))
        // 首页 尾页
        this.$firstBtuEle.on("click", this.first.bind(this));
        this.$lastBtuEle.on("click", this.last.bind(this));
        // 上一页下一页
        this.$prevBtuEle.on("click", this.prev.bind(this));
        this.$nextBtuEle.on("click", this.next.bind(this));
        // 修改当前页 当失焦当时候
        this.$eachPageEle.on('blur', this.setEachPageHadle.bind(this));
        // 当前页下拉列表绑定
        this.$curPageEle.on("change", this.setcurPageHandel.bind(this));
        // 单选框改变
        this.radioHandel();
    }
}